<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <style>
        .confirm-modal .modal-box .modal-box {
            width: 466px;
            height: 286px;
            margin: -143px 0 0 -233px;
        }
        .modal-box {
            top: 50%;
            left: 50%;
            z-index: 101;
            overflow: hidden;
            position: absolute;
            border: 6px solid #bbb;
            background-color: #fff;
            -webkit-animation: scale-in both cubic-bezier(.4,0,0,1.5) .3s;
            animation: scale-in both cubic-bezier(.4,0,0,1.5) .3s;
            margin: -143px 0 0 -233px;
        }
        .timeout-modal .modal-box {
            width: 400px;
            height: 246px;
            margin: -123px 0 0 -200px;
        }

        .timeout-modal p {
            padding: 25px 0;
        }

        .timeout-modal .btn {
            width: 130px;
            padding-left: 0;
            padding-right: 0;
            margin-left: 12px;
        }
        .btn {
            background-color: #2bb8aa;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#2fc9b9),to(#29b0a2));
            background-image: -webkit-linear-gradient(top,#2fc9b9,#29b0a2);
            background-image: linear-gradient(180deg,#2fc9b9,#29b0a2);
            border-bottom: 1px solid #18655e;
            color: #fff;
            border: none;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border-radius: 2px;
            letter-spacing: 2px;
            padding: 5px 12px 4px;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
        }
        button {
            margin: 0;
            font: inherit;
            color: inherit;
        }
            .btn:hover {
                color: #fff;
                background-color: #28ac9f;
                background-image: -webkit-gradient(linear,left top,left bottom,from(#2dc0b2),to(#27a79b));
                background-image: -webkit-linear-gradient(top,#2dc0b2,#27a79b);
                background-image: linear-gradient(180deg,#2dc0b2,#27a79b);
            }
        .weixinqr-modal .modal-box {
            width: 716px;
            height: 438px;
            margin: -219px 0 0 -358px;
        }
        .icon {
            font-size: 0;
            background-image: url(https://mpay.meituan.com/resource/cashier/img/icon-common@2x.KyXBh.png);
            background-size: 168px;
        }
        .icon-close {
            top: 13px;
            right: 13px;
            width: 13px;
            height: 13px;
            z-index: 5;
            cursor: pointer;
            position: absolute;
            background-position: -17px -88px;
        }

        .modal-head {
            height: 40px;
            position: relative;
            background-color: #f7f7f7;
        }
        .modal-body {
            margin: 40px;
            position: relative;
        }

        .modal-content {
            padding-left: 90px;
        }

            .modal-content h3 {
                font-size: 16px;
                line-height: 30px;
                margin-bottom: 6px;
            }
        .icon-ecom {
            top: 5px;
            left: 5px;
            width: 60px;
            height: 60px;
            position: absolute;
        }
        .modal-btn-group {
            margin: 15px 0 20px;
        }

            .modal-btn-group .btn {
                font-weight: 700;
                padding: 7px 20px 6px;
            }
        .modal-btn-ok {
            margin-right: 15px;
        }

        .modal-back {
            cursor: pointer;
            color: #2bb8aa;
        }

            .modal-back:hover {
                text-decoration: underline;
            }
    </style>
</head>
<body>
    <div class="modal-box">
        <div class="modal-head">
            <i class="icon icon-close"></i>
        </div>
        <div class="modal-body">
            <i class="icon icon-ecom"></i>
            <div class="modal-content">
                <h3>请您在新打开的页面上完成付款。</h3>
                <p>付款完成前请不要关闭此窗口。<br>完成付款后请根据您的情况点击下面的按钮：</p>
                <div class="modal-btn-group">
                    <button class="btn modal-btn-ok">已完成付款</button>
                    <button class="btn modal-btn-cancel">付款遇到问题</button>
                </div><span class="modal-back">返回选择其他支付方式</span>
            </div>
        </div>
    </div>
    <input type="button" name="name" value="切换" />
</body>
</html>
<script src="Script/jquery-1.11.3.min.js"></script>
<script>
    $(".icon-close").click(function () {
        $(".modal-box").css("display", "none");
    })
    $("input[name='name']").click(function () {
        $(".modal-box").slideToggle(500);
    })
    $.test = function () {

    }
    
</script>